<template>
  <div class="contain">
   
    <div class="second">
      <img src="@/assets/imgs/logo.png" alt="" class="logo" />
      <div class="main">
        <div class="m-top">
          <div class="m-left">
            <div class="m-tleft"> 
            </div>
          </div>
        </div>
        <div class="m-bottom">
          <el-descriptions
            class="margin-top"
            :column="3"
            :size="size"
          >
            <el-descriptions-item label="主题:">
              {{formData.theme}}
            </el-descriptions-item>
            <el-descriptions-item label="有效日期:">
              {{formData.startDate}} 到 {{formData.endDate}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            class="margin-top"
            :column="3"
            :size="size"
          >
            <el-descriptions-item label="内容简介:">
              {{formData.content}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            class="margin-top"
            :column="3"
            :size="size"
          >
            <el-descriptions-item label="公函内容:">
              <div v-html="userBio"></div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <div class="third">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="附件列表" name="jsxx">
          <el-table ref="multipleTableRef" :data="uploadList" style="width: 100%; margin-top: 10px; height: 200px;">
            <el-table-column label="序号" type="index"  header-align="center" align="center" width="60px" fixed />
            <el-table-column label="文件名称" align="center" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="文件路径" align="center" prop="url" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" fixed="right" width="140px">
              <template #default="scope">
                <el-link type="primary" download :href="scope.row.url" :underline="false" target="_blank">下载</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BaseOfficialLetterApi, BaseOfficialLetterVO } from '@/api/infra/baseofficialletter'
import * as UserApi from '@/api/system/user'
import * as DeptApi from '@/api/system/dept'

import { CommonStatusEnum } from '@/utils/constants'
import { DICT_TYPE } from '@/utils/dict'
import type { UploadUserFile } from 'element-plus'
import { ref, defineProps } from 'vue'

/** 公函 表单 */
defineOptions({ name: 'DetailForm' })
const props = defineProps({
  detailId: Number
});

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const uploadList = ref<UploadUserFile[]>([])
const activeName = ref('jsxx')
const dialogVisible = ref(false) // 弹窗的是否展示
const userBio = ref('')
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  theme: undefined,
  daterange: undefined,
  startDate: undefined,
  endDate: undefined,
  fileExists: undefined,
  content: undefined,
  remark: undefined,
  imageAddress: undefined,
  status: CommonStatusEnum.ENABLE,
  detailData: undefined,
  fileData: undefined
})
/** 初始化 **/
onMounted(() => {
  getClassManage()
})

/** 查询列表 */
const getClassManage = async () => {
  resetForm()
  uploadList.value = []
  // 修改时，设置数据
  if (props.detailId) {
    const id = props.detailId
    formLoading.value = true
    try {
      formData.value = await BaseOfficialLetterApi.getBaseOfficialLetter(id)
      formData.value.daterange = [formData.value.startDate, formData.value.endDate]
      userBio.value = formData.value.remark

      uploadList.value = await BaseOfficialLetterApi.getLetterFileList(id)
    } finally {
      formLoading.value = false
    }
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    theme: undefined,
    daterange: undefined,
    startDate: undefined,
    endDate: undefined,
    fileExists: undefined,
    content: undefined,
    remark: undefined,
    imageAddress: undefined,
    status: CommonStatusEnum.ENABLE,
    detailData: undefined,
    fileData: undefined
  }
}
</script>

<style scoped lang="scss">
.first{
  line-height:25px;
  font-size:18px;
  color:#8a8a8a;
  display:flex;
  :deep(.el-icon){
    margin-top:5px !important
  }
}
.left{
  margin-left:12px
}
.second{
  background:#fff;
  padding:15px 20px;
  display:flex;
  margin-top:10px;
}
.logo{
  height:80px;
  width:80px
}
.main{
  margin-left:30px;
  width:calc(100% - 110px)
}
.m-top{
  display: flex;
  justify-content: space-between;
}
.m-tleft{
  display:flex
}
.gender{
  height:20px;
  width:20px;
  margin:3px 8px 0 8px
}
.age{
  color:#8a8a8a;
  line-height:26px
}
.tag1{
  padding:5px 10px;
  color:#4341ff;  
  border:1px solid #4341ff;
  margin-top: 10px;
  font-size:14px
}
.tag2{
  padding:5px  10px;
  color:#dc806f;
  border:1px solid #dc806f;
  margin-left:10px;
  margin-top: 10px;
  font-size:14px
}
.tag3{
  padding:5px  10px;
  color:#787878;
  margin-top: 10px;
  margin-left:10px;
  border:1px solid #787878;
  font-size:14px
}
.name{
  font-size:20px;
  font-weight:bold
}
.m-bottom{
  margin:20px 0;
}
:deep(.el-descriptions__label){
  font-size:16px;
  color:#8a8a8a
}
:deep(.el-descriptions__content){
  font-size:16px;
  color:#333
}
.third{
  background:#fff;
  margin-top:10px;
  padding:15px
}
:deep(.el-tabs__item){
  padding:0 30px !important;
}
</style>